<template>
    <el-card class="ep-card" v-if="!hidden" style="margin-bottom:10px">
        <div class="search-content">
            <div class="search-input">
               <epl-searchBank :datas="datas" :tableList="bankTableList" :api="bankTableListUrl" :show="showBank" :property="bank" :type="bankType" title="银行查询" placeholder="请输入银行行号"></epl-searchBank>
            </div>
            <slot></slot>
        </div>
    </el-card>
</template>

<script type="es6">

    export default {
        props: {
            title: {
                type: String,
                default: '请填写title属性'
            },
            hidden: {
                type: Boolean,
                default:false
            },
            bank: {},
            TagType: {
                type: String,
                default:''
            },
            showBank: {
                type: Boolean,
                default:false
            },
            bankType: {
                type: String,
                default: ''
            },
            datas: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                dialogVisible:false,
                tableData:[],
                id:'',
                form:{
                    idCard:'',
                    name:'',
                    paymentStatus:''
                },
                psTableData:[],
                bankTableList:[],
                psUrl:'',
                bankTableListUrl:''
            }
        },
        watch:{
            TagType: {
                handler(value) {
                    console.log(111)
                    this.getTableList(value,this.bankType);
                },
                deep: true
            },
        },
        created() {
            if(this.TagType){
                console.log("this.TagType",this.TagType)
                console.log("this.bankType",this.bankType)
                this.getTableList(this.TagType,this.bankType);
            }
            console.log("showBank",this.showBank)
        },
        methods: {
            /**
             * 根据tagType区分逻辑
             */
            getTableList(tag,type){
                let table = [];
                let url = '';
                switch (tag) {
                    // 银行
                    case 'BANK_PENSION_QUERY':
                        table = [
                            {name:'银行行名',value:'aaf002'},
                        ];
                        url = '/business/d101insib/d01pensioncommon/PensionQueryComm/doBankQueryComm';
                        break;
                }
                // console.log('table',table);
                 if(type.indexOf('BANK') != '-1'){
                    //  BANK_ALL_EXACT
                    this.bankTableList = table;
                    this.bankTableListUrl = url;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .search-content{
        display: flex;
        justify-content:space-between;
        .search-input {
            display: flex;
            flex: 1;
            margin-right: 30px;
            span {
                flex: 100px;
                margin-right: 5px;
                line-height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            span:before {
                content: '*';
                color: #f56c6c;
                margin-right: 4px;
            }

            .el-icon-search {
                cursor: pointer;
            }

            .el-icon-search:hover {
                color: #409eff;
            }
        }
    }
</style>
